<template>
	<view v-if="visible" class="drawer-popup">
		<view class="drawer-mask" @click="closeDrawer"></view>
		<view class="drawer-content" :class="visible?'dialog-fade-enter-active':'dialog-fade-leave-active'">
			<view :style="'height:' + statusBarHeight1 + 'px;background: white;'"></view>
			<view class="drawer-header">
				<image @click="closeDrawer" src="https://pic.bangbangtongcheng.com/static/black-left-arrow.png"></image>
				<span>{{ title }}</span>
			</view>
			<view class="drawer-body">
				<slot></slot>
			</view>
			<view class="drawer-floot">
				<view class="left" @click="reset">重置</view>
				<view class="right" @click="confirm">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	export default {
		name: 'top-to-bottom-drawer',
		props: {
			title: {
				type: String,
				default: '选择'
			},
			visible: {
				type: Boolean,
				default: false
			}
		},
		computed: {
			...mapGetters(["statusBarHeight1"]),
		},
		methods: {
			reset() {
				this.$emit('reset');
			},
			confirm() {
				this.$emit('confirm');
			},
			closeDrawer() {
				this.$emit('closeDrawer', false);
			}
		},
		watch: {
			visible(newVal, oldVal) {
				if (newVal == true) {
					this.$emit('openDrawer');
				}
			}
		},
		created() {}
	};
</script>

<style lang="less" scoped>
	.drawer-popup {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 190;
		width: 750rpx;
	}

	.drawer-mask {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.drawer-content {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		background-color: #F5F7F9;
		//transform: translateY(-100%);
		transition: transform 0.3s ease-in-out;

		.drawer-header {
			padding: 0rpx 10px;
			background: white;
			display: flex;
			align-items: center;
			font-weight: 500;
			font-size: 32rpx;
			color: #000000;
			height: 80rpx;
			line-height: 80rpx;

			// .drawer-title {
			// 	width: 750rpx;
			// 	display: flex;
			// 	align-items: center;

			// }
			image {
				width: 30rpx;
				height: 30rpx;
				margin: 0rpx !important;
				margin-right: 8rpx !important;
				// position: unset;
			}
		}
	}

	.drawer-floot {
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		background: white;
		height: 120rpx;
		display: flex;
		justify-content: space-around;
		padding: 20rpx;
		box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.03);

		view {
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			width: 306rpx;
			height: 80rpx;
			line-height: 80rpx;
			background: #E7F5F4;
			border-radius: 45rpx;
			border: 1rpx solid #0FA291;
		}

		.left {
			color: #0FA291;
		}

		.right {
			background: #0FA291;
		}
	}

	.drawer-close {
		cursor: pointer;
	}

	.drawer-body {
		padding: 20rpx;
	}

	.dialog-fade-enter-active {
		animation: dialog-fade-in .4s
	}

	.dialog-fade-leave-active {
		animation: dialog-fade-out .4s
	}

	@keyframes dialog-fade-in {
		0% {
			transform: translate3d(0, -20px, 0);
			opacity: 0
		}

		to {
			transform: translateZ(0);
			opacity: 1
		}
	}

	@keyframes dialog-fade-out {
		0% {
			transform: translateZ(0);
			opacity: 1
		}

		to {
			transform: translate3d(0, -20px, 0);
			opacity: 0
		}
	}
</style>